<template>
  <div class="user">
    <basic-container>
      <h4>批次打款金额</h4>
      <el-row :span="24" class="row">
        <el-col :span="3">
          服务费承担方：
        </el-col>
        <el-col :span="6">
          <avue-radio v-model="form.type" :dic="type"></avue-radio>
        </el-col>
      </el-row>
      <el-row :span="24" class="row">
        <el-col :span="3">
          费率（%）：
        </el-col>
        <el-col :span="6">
          <avue-input-number style="width: 230px" v-model="form.percent" :precision="2" placeholder="请输入费率"></avue-input-number>
        </el-col>
      </el-row>
      <el-row :span="24" class="row">
        <el-col :span="3">
          待发金额：
        </el-col>
        <el-col :span="6">
          <avue-input-number style="width: 230px" v-model="form.money" :precision="2"></avue-input-number>
        </el-col>
      </el-row>
      <el-row :span="24" class="row">
        <el-col :span="3">
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="submit"> 
              确定
          </el-button>
        </el-col>
      </el-row>
      <div v-if="showResult">
        <h4>费用详情</h4>
        <el-row :span="24" class="row">
          <el-col :span="3">
            企业实际支付金额
          </el-col>
          <el-col :span="6">
            {{d.real}}
          </el-col>
        </el-row>
        <el-row :span="24" class="row">
          <el-col :span="3">
            服务费
          </el-col>
          <el-col :span="6">
            {{d.charge}}
          </el-col>
        </el-row>
        <el-row :span="24" class="row">
          <el-col :span="3">
            自由职业者实得
          </el-col>
          <el-col :span="6">
            {{d.money}}
          </el-col>
        </el-row>
      </div>
      
    </basic-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { BigNumber } from 'bignumber.js'

export default {
  data() {
    return {
      form: {},
      d: {},
      showResult: false,
      type: [
        {
          label: "由企业承担",
          value: 1
        },
        {
          label: "由职业者承担",
          value: 2
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["permissions", "access_token"])
  },
  created() {
    // this.sys_user_add = this.permissions["sys_user_add"];
    // this.sys_user_edit = this.permissions["sys_user_edit"];
    // this.sys_user_del = this.permissions["sys_user_del"];
  },
  methods: {
    submit() {
      if(!this.form.type || !this.form.percent || !this.form.money){
        this.$message.warning("参数不全");
        return
      }
      this.showResult = true
      if(this.form.type === 1){
        this.d = {
          charge: BigNumber(this.form.money).multipliedBy(BigNumber(this.form.percent).dividedBy(100)),
          real: BigNumber(this.form.money).plus(BigNumber(this.form.money).multipliedBy(BigNumber(this.form.percent).dividedBy(100))),
          money: this.form.money
        }
      }
      if(this.form.type === 2){
        this.d = {
          charge: BigNumber(this.form.money).multipliedBy(BigNumber(this.form.percent).dividedBy(100)),
          money: BigNumber(this.form.money).minus(BigNumber(this.form.money).multipliedBy(BigNumber(this.form.percent).dividedBy(100))),
          real: this.form.money
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.row {
  margin: 15px 0;
}
</style>
